<template>
  <div style="width: 100%; height: 100%">
    <div class="item-title" style="align-items: center; justify-content: center">
      <span style="margin: auto 0">{{ title }}</span>
    </div>
    <div class="item-box">
      <!-- 添加 canvas 元素 -->
      <canvas ref="canvas" style="width: 100%; height: 100%" id="loveItem"></canvas>
    </div>
  </div>
</template>

<script>

export default {
  name: "loveItem",
  data() {
    return {
      animationId: null, // 用于存储动画ID
      heartbeatPhase: 0,  // 用于控制心跳动画的相位
      particles: []      // 存储散点数据
    }
  },
  props: {
    title: {
      type: String,
      default: '用程序换一个爱心[doge]'
    } 
  },
  mounted() {
    this.initLove();
    this.startHeartbeatAnimation(); // 启动心跳动画
  },
  watch: {},
  beforeUnmount() {
    // 组件销毁前取消动画
    if (this.animationId) {
      cancelAnimationFrame(this.animationId);
    }
  },
  methods: {
    startHeartbeatAnimation() {
      const animate = () => {
        // 更新相位
        this.heartbeatPhase += 0.075;

        // 使用正弦函数创建跳动效果，scaleFactor在0.9到1.1之间变化
        const scaleFactor = 1 + 0.15 * Math.sin(this.heartbeatPhase);

        // 重新绘制爱心
        this.drawStaticHeart(scaleFactor);

        // 继续动画循环
        this.animationId = requestAnimationFrame(animate);
      };

      // 启动动画
      animate();
    },
    // 不改变公式的请开昂下通过偏移和points数组进行扩大图形
    // initLove() {
    //   const canvas = document.getElementById('loveItem');
    //   const ctx = canvas.getContext('2d');
    //
    //   // 设置canvas尺寸
    //   canvas.width = window.innerWidth;
    //   canvas.height = window.innerHeight;
    //   //清空画布
    //   ctx.clearRect(0, 0, canvas.width, canvas.height);
    //
    //   //缩放居中
    //   const centerX = canvas.width / 2;
    //   const centerY = canvas.height / 2;
    //   const scale = 80; // 控制大小
    //
    //   // 绘制爱心
    //   ctx.beginPath();
    //
    //   // 定义函数
    //   const drawHeartUp = () => {
    //     const points = [];
    //     let y = 0;
    //     for (let x = -2; x <= 2; x += 0.01) {
    //       y = Math.sqrt(1 - Math.pow(Math.abs(x) - 1, 2));
    //       // 判断y值是否为NaN
    //       if(!isNaN(y) || !isNaN(x)) {
    //         points.push({x: 3 * x, y: 3 * y + 2.5})
    //       }
    //     }
    //
    //     for (let i = 0; i < points.length; i++) {
    //       const p = points[i];
    //       const px = centerX + p.x * scale;
    //       const py = centerY - p.y * scale;
    //       if (i === 0) {
    //         ctx.moveTo(px, py);
    //       } else {
    //         ctx.lineTo(px, py);
    //       }
    //     }
    //   }
    //
    //   const drawHeartDown = () => {
    //     const points = [];
    //     let y = 0;
    //     for (let x = -2; x <= 2; x += 0.01) {
    //       y = Math.acos(1 - Math.abs(x)) - 3;
    //       if(!isNaN(y) || !isNaN(x)) {
    //         points.push({x: 3 * x, y: 3 * y + 2.5})
    //       }
    //     }
    //
    //     for (let i = 0; i < points.length; i++) {
    //       const p = points[i];
    //       const px = centerX + p.x * scale;
    //       const py = centerY - p.y * scale;
    //       if (i === 0) {
    //         ctx.moveTo(px, py);
    //       } else {
    //         ctx.lineTo(px, py);
    //       }
    //     }
    //
    //     // 闭合路径（连接到起点）
    //     ctx.closePath();
    //   }
    //
    //   drawHeartUp();
    //   drawHeartDown()
    //
    //   // 描边
    //   ctx.strokeStyle = '#ff1493';
    //   ctx.lineWidth = 2;
    //   ctx.stroke();
    // },

    // 直接通过公式修改图形的大小
    initLove() {
      const canvas = document.getElementById('loveItem');
      const ctx = canvas.getContext('2d');

      // 设置canvas尺寸
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      console.log(canvas.width, canvas.height)

      //清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      //缩放居中
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      const scale = 80; // 控制大小

      // 定义函数
      const drawHeartUp = (scaleFactor = 1) => {
        ctx.beginPath();
        const points = [];
        let y = 0;
        for(let x = -6; x <= 6; x += Math.PI / 100) {
          y = Math.sqrt(9 - Math.pow(Math.abs(x) - 3, 2));
          points.push({x: x * scaleFactor, y: y * scaleFactor+3})
        }

        for (let i = 0; i < points.length; i++) {
          const p = points[i];
          const px = centerX + p.x * scale;
          const py = centerY - p.y * scale;
          if (i === 0) {
            ctx.moveTo(px, py);
          } else {
            ctx.lineTo(px, py);
          }
        }
      }

      const drawHeartDown = (scaleFactor = 1) => {
        const points = [];
        let y = 0;
        for(let x = 6; x >= -6; x -= Math.PI / 100) {
          y = 3* (Math.acos(1 - Math.abs(x) / 3) - Math.PI);
          points.push({x: x * scaleFactor, y: y * scaleFactor+3})
        }

        for (let i = 0; i < points.length; i++) {
          const p = points[i];
          const px = centerX + p.x * scale;
          const py = centerY - p.y * scale;
          if (i === 0) {
            ctx.moveTo(px, py);
          } else {
            ctx.lineTo(px, py);
          }
        }
      }

      this.drawStaticHeart = function(scaleFactor = 1) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawHeartUp(scaleFactor);
        drawHeartDown(scaleFactor);

        const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
        gradient.addColorStop(0, '#ff1493');    // 深粉色
        gradient.addColorStop(0.5, '#ff69b4');  // 热粉色
        gradient.addColorStop(1, '#ffb6c1');    // 浅粉色

        // 描边
        ctx.strokeStyle = gradient;
        ctx.lineWidth = 2;
        ctx.stroke();
      }
    }

  },
}
</script>

<style scoped lang="scss">

$easeTimer: 1;

@function ease-time($easeTimer) {
  @return unquote($easeTimer + 's');
}

@for $i from 1 through 10 {
  .ease#{$i} {
    animation: ease ease-time($easeTimer + $i);
  }
}

@keyframes ease {
  from {
    opacity: 0; // 初始透明度
  }
}

.item-title {
  color: white;
  width: 100%;
  height: 13%;
  display: flex;
  flex-direction: column;
  align-content: center;
}

.item-box {
  width: 100%;
  height: 85%;
}

.flex1 {
  flex: 1;
}
</style>
